const path = require('path');
// HtmlWebpackPlugin会在打包结束，自动生成一个html文件，并把打包生成的js自动引入到这个html文件。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');



// plugin 可以在webpack运行到某个时刻的时候，帮你做一些事情

// 设置环境变量
process.env.NODE_ENV = 'development';

module.exports = {
    mode: 'development',
    // development devtool: 'cheap-module-eval-source-map'
    // development devtool: 'cheap-module-source-map'
    devtool: 'cheap-module-eval-source-map',
    //entry: './src/index.js',
    entry: {
        main: './src/index.js',
        sub: './src/index.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname,"dist"),
        //path: __dirname + '/dist',
        publicPath: '',
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8888,
        hot: true,
        hotOnly: true,
        // proxy: {
        //     '/api': 'http://localhost:3000'
        // }
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './index.html', filename: 'index.html', cache: false }),
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    // options: {
                    //     presets: [
                    //         ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }],
                    //         '@babel/preset-react'
                    //     ]
                    // }
                }
            },
            {
                test: /\.(jpg|png|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name(file) {
                            console.log('=== 构建时执行 name 函数 ===');
                            console.log('当前环境:', process.env.NODE_ENV);
                            console.log('文件路径:', file);
                            
                            if(process.env.NODE_ENV === 'development') {
                                console.log('使用开发环境命名规则');
                                return '[name]-[hash].[ext]'
                            }
                            console.log('使用生产环境命名规则');
                            return '[name]-[hash].[ext]'
                        },
                        outputPath: 'images/',
                        limit: 204800
                    }
                }
            },
            {
                // test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 8192,
                        name: 'fonts/[name].[hash:8].[ext]'
                    }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 2 } },
                    'postcss-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    { loader: 'css-loader', options: { importLoaders: 1 } },
                    'postcss-loader'
                ]
            }
        ]
    }
}